<template>
	<view class="searchBox">
		<view class="search">
			<u-search shape="square"
				placeholder="请输入你要搜索的关键词" 
				:showAction='false' 
				@search="SearchMovie"
				@change="searchChange"
				v-model="keyword"></u-search>
		</view>
		<view class="like" v-if="likeShow">
			<p>猜你想搜</p>
			<view class="u-page__tag">
				<view class="u-page__tag-item" v-for="(item,index) in categoryList" :key="index">
					<u-tag :text="item.name" plain @click="searchTags(item)"></u-tag>
				</view>
			</view>
		</view>
		<view class="empty">
			<u-empty
			        mode="search"
			        icon="../../static/img/nothing.png"
					:show="empty"
			>
			</u-empty>
		</view>
		<view class="movieList" v-for="(item,index) in searchList" :key="index">
			<view class="movieImg">
				<img :src="'http://172.21.63.114:10001/'+item.cover" alt="">
			</view>
			<view class="movieContent">
				<p class="title">{{item.name}}</p>
				<p class="score" style="float: left;">评分:</p>
				<u-rate count="5" size="14px" active-color="#3cc51f" readonly v-model="item.score"></u-rate>
				<p style="clear: both;"> </p>
				<p class="introduction" v-html="item.introduction"></p>
					
				<p class="language">上映时间：{{item.playDate}}</p>
			</view>
			<view class="buyMovie">
				<u-button size="small" @click="movieDetails(item.id)">详情</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				moviesList:[],
				keyword:'',
				searchList:[],
				categoryList:[{
					name:'故事',
					index:1
				},{
					name:'爱情',
					index:2
				},{
					name:'动作',
					index:3
				},{
					name:'喜剧',
					index:4
				},{
					name:'恐怖',
					index:5
				},{
					name:'惊悚',
					index:6
				},{
					name:'战争',
					index:7
				},{
					name:'科幻',
					index:8
				}],
				likeShow:true,
				empty:false,
			};
		},
		onLoad(opt) {
			this.moviesList=JSON.parse(opt.moviesList)
		},
		methods:{
			SearchMovie(val){
				if(val!==''){
					this.likeShow=false
					this.searchList=this.moviesList.filter(item =>{
						return item.name.indexOf(val)!=-1
					})
					if(this.searchList.length==0){
						this.empty=true
					}else{
						this.empty=false
					}
				}else{
					this.searchList=[]
					this.likeShow=true
					this.empty=false
				}
				
			},
			searchTags(i){
				this.searchList=this.moviesList.filter(item =>{
					return item.category == i.index
				})
				if(this.searchList.length==0){
					this.empty=true
				}else{
					this.empty=false
				}
			},
			searchChange(val){
				if(val==''){
					this.searchList=[]
					this.likeShow=true
					this.empty=false
				}
			},
			log(){
				console.log(this.searchList);
			},
			movieDetails(id){
				uni.navigateTo({
					url:'/pages/movieDetails/movieDetails?movieId='+id
				})
			}
		}
	}
</script>

<style lang="scss">
.searchBox{
	padding:10rpx  10rpx;
	.like{
		margin-top: 20rpx;
		font-size: 30rpx;
		color: #a2a2a2;
		.u-page__tag{
			display: flex;
			flex-wrap: wrap;
			.u-page__tag-item{
				margin: 5rpx 20rpx;
			}
		}
		
	}
	.movieList {
		display: flex;
		border-bottom: 2rpx solid #eeeeee;
	
		.movieImg {
			width: 160rpx;
			height: 220rpx;
			padding: 16rpx 30rpx;
	
			img {
				width: 100%;
				height: 100%;
			}
		}
	
		.movieContent {
			flex: 1;
			padding-top: 30rpx;
	
			.score,
			.language {
				font-size: 25rpx;
				margin: 5rpx 0;
			}
	
			.introduction {
				font-size: 25rpx;
				margin: 5rpx 0;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}
		}
	
		.buyMovie {
			width: 120rpx;
			padding: 100rpx 10rpx 0 0;
	
			/deep/.u-button {
				color: #3cc51f;
				border-color: #3cc51f;
			}
		}
	}
}
</style>
